<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>扫码统计</title>
    <link href="$!{basePath}/plug-in/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/mobile-ui1.0-compress.css"/>
    <style>
        .inputStyle {
            outline: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 24px;
            width: 100%;}
        .form{
            width: 95%;
            margin: 0 auto;
            background-color: #F2F2F2;
            padding: 8px;
        }

        .myform{
            font-size: 14px;
            width: 95%;
            margin: 6px auto;
			display: flex;
			align-items: center;
        }
        .mylabel{
			width:20%;
        }
        .but{
            width: 22%;
            margin: 3px 0;
            background-color: #49A8EC;
            color: #fff;
            text-align: center;
            padding: 4px 0;
            border-radius: 4px;
        }
		.val{
			width:70%
		}
        .table{
            width: 95%;
            overflow: auto;
            margin: 0 auto;
            text-align: center;
        }
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            table-layout: fixed;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px 4px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .mylayuilabel{
            float: left;
            display: block;
            padding: 3px 0px;
            width: 80px;
            font-weight: 400;
            line-height: 20px;
        }
        #test5,#test6,#posterId{
            height: 26px;
        }

        .form-top{
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="form">
            <form>
                <div class="myform">
                    <div class="layui-inline">
                        <div class="mylayuilabel">
                            <span>开始时间</span>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test5" placeholder="选择开始时间">
                        </div>

                    </div>

                </div>
                <div class="myform">
                    <div class="layui-inline">
                        <div class="mylayuilabel">
                            <span>结束时间</span>
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test6" placeholder="选择结束时间">
                        </div>

                    </div>

                </div>
                <div class="myform">
                    <div class="mylayuilabel">
                        <span>海报编码</span>
                    </div>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="posterId" type="text" id="posterId" placeholder="请输入海报编码">
                    </div>
                </div>
                <div class="but" onclick="serachCode()">
                    <span>搜索</span>
                </div>
                <!--<div class="myform">
                    <div class="mylabel">
                        <span>支付状态</span>
                    </div>
                    <div class="val" style="width:40%;">
                        <select name="status" class="inputStyle" style="height:28px;">
                            <option value="" disabled selected>请选择</option>
                            <option value ="1">未支付</option>
                            <option value ="0">已支付</option>
                        </select>
                    </div>
					 <div class="but">
						<span>搜索</span>
					</div>
                </div>-->

            </form>
        </div>
        <div class="table">
            <table class="gridtable" width="100%">
                <thead>
                    <th style="width: 18%;text-align:center;">操作</th>
                    <th style="width: 20%;text-align:center;">扫码时间</th>
                    <th style="text-align:center;">openId</th>
                    <th style="width: 15%;text-align: center;">扫码次数</th>
                    <th style="width: 15%;text-align: center;">海报编码</th>
                </thead>
                <tbody id="tableBody">
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="$!{basePath}/plug-in/js/jquery-1.9.1.js"></script>
<script src="$!{basePath}/content/system/h5/js/mobile-ui1.0-compress.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="$!{basePath}/layui/css/layui.css"  media="all">
<script src="$!{basePath}/layui/layui.js" charset="utf-8"></script>
<script>
    function dateFormat(fmt, date) {
        let ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }

    let date = new Date(new Date()-1000*60*60*24);
    let startDate = dateFormat("YYYY-mm-dd", date);
    console.log("startDate-->", startDate);
    let startTime = new Date(startDate + " 18:00:00");
    console.log("startTime-->",startTime);

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'datetime'
            ,format: "yyyy-MM-dd HH:mm:ss"
            ,value: startTime
        });
        laydate.render({
            elem: '#test6'
            ,type: 'datetime'
            ,format: "yyyy-MM-dd HH:mm:ss"
            ,value: new Date()
        });
    });
    var pageNo=1,pageSize=20
    var type=this.getQueryVariable('type');
    console.log(type);
    getData()
    var normalState=true;
    var h=$(window).height();
    var domH= $("form").outerHeight();
    $(".table").css({"height":h-domH-80+"px"})
    //滚动条滚动的时候
    $(".table").scroll(function() {
        //获取当前加载更多按钮距离顶部的距离
        var bottomsubmit = $('.table').offset().top;
        //获取当前页面底部距离顶部的高度距离
        var nowtop = $(document).scrollTop() + $(window).height();
        //获取当前页数，默认第一页
        var now = $('.table').attr('now');
        //获取总页数
        var num = $('.table').attr('num');
        if(nowtop>bottomsubmit){
            console.log("加载更多")
            if(normalState==true){
                normalState=false;
                setTimeout(function(){
                    pageNo++;
                    getData()
                },500)
            }
        }
    });
    function getData(){
        var posterId = $("#posterId").val();
        var startDateTime = $("#test5").val();
        var endDateTime = $("#test6").val();
        console.log("type:",type);
        $.ajax({
            url:"$!{basePath}/system/back/poster/posterMa/myList.do",
            type:"post",
            data:{
                pageNo:pageNo,
                pageSize:pageSize,
                posterId:posterId,
                queryType:type,
                startDateTime:startDateTime,
                endDateTime:endDateTime
            },
            success:function (res) {
                var pageInfos = res.pageInfos.values;
                $('.table').attr('now',res.pageInfos.pagenation.pageNo)
                $('.table').attr('num',res.pageInfos.pagenation.pageCount)
                addTr(pageInfos);
            }
        })
    }

    /*添加表数据*/
    function addTr(pageInfos) {
        for(var i=0;i<pageInfos.length;i++){
            var str="<tr>\n";
            if(pageInfos[i].isBlack == '1') {
                str += "<td style=\"width: 18%;color: #ff0000\">已拉黑</td>\n";
            } else {
                str += "<td style=\"width: 18%\"><button onclick=\"lahei('"+pageInfos[i].studyOpenId+"')\" class=\"btn btn-warning btn-sm\">拉黑</button></td>\n";
            }

            str += "<td style=\"width: 20%\">"+pageInfos[i].createDate+ "<br/>"+ pageInfos[i].createTime+"</td>\n" +
                "<td style=\"width: 50%\">"+pageInfos[i].studyOpenId+"</td>\n" +
                "<td style=\"width: 10%\">"+pageInfos[i].number+"</td>\n" +
                "<td style=\"width: 10%\">"+pageInfos[i].posterId+"</td>\n" +
                "</tr>";
            $("#tableBody").append(str)
        }
    }

    //拉黑
    function lahei(openId) {
        $.ajax({
            url:"$!{basePath}/system/back/poster/blackperson/doAdd.do",
            type:"post",
            data:{
                openId:openId
            },
            success:function (res) {
                if(res.success) {
                    MobileUi.init({
                        type: 2,
                        title: '温馨提示',
                        text: "拉黑成功！",
                        callbak:function(){
                            location.reload("$!{basePath}/system/back/poster/posterMa/toMyList.do");

                        }
                    })
                }
            }
        })
    }

    //查询
    function serachCode() {
        $("#tableBody").empty()
        getData()
    }

    function getQueryVariable(variable){
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
</script>